<template>
  <div>
    <!-- 封装一个学生列表组件，当某个位置，需要展示学生列表时，只要准备某个组件即可 -->
    <!-- 
        money="100"      这个"100" 是字符串
        :money="100"     这个是数字 
        :money="'100'"   这个是字符串 

        flag="true"      字符串
        :flag="true"     布尔值

        一旦加了: 表示动态解析值，外层的双引号不看
     -->
    <hm-list
      :data="studentArr"
      :money="500"
      car="劳斯莱斯"
      :flag="true"
      :params="100"
      :age="18"
      color="red"
    >
    </hm-list>
  </div>
</template>

<script>
import HmList from './0-校验相关.vue'
export default {
  data() {
    // 不同场景下，后台给的学生列表数据，不一样的 => 但是展示的效果是一致的
    return {
      studentArr: [
        { id: 1, name: 'zs', age: 18 },
        { id: 2, name: 'ls', age: 18 },
        { id: 3, name: 'ww', age: 18 }
      ],
      count: 100
    }
  },
  components: {
    HmList
  }
}
</script>

<style>
</style>